<template>
  <div class="messageContent ">
    <div class="messageCard ">
      <div v-if="isPackUp" style="display: flex">


        <div class="messageBody" >
          <!--  文章标题  -->
          <div class="title" onMouseEnter="this.className = 'title onFocus'" onMouseLeave="this.className = 'title'">
<!--            <router-link :to="{path: `/article/${messageData.articleId}`}">{{messageData.articleTitle}}</router-link>-->
            <span @click="goArticle">{{messageData.articleTitle}}</span>
<!--            <a :href="`/article/${messageData.articleId}`">{{messageData.articleTitle}}</a>-->
          </div>
          <!--  正文部分  -->
          <div class="messageDiv" onMouseEnter="this.className = 'messageDiv messageOnFocus'" onMouseLeave="this.className = 'messageDiv'">
<!--            <span class="spanMessage">邵云蛟： 分享9个超小众，但巨好用的学习类APP！一旦打开让你不自觉开始学习，比抖音更容易上瘾！ 最近喜欢一句话：别赢在了高考，却输在了大学！职场上也是一样的，如果停止了学习，很容易被超越！但有的时候有很…</span>-->
<!--            <span v-html="messageData.articleBody" class="spanMessage"></span>-->
            <span  class="spanMessage" @click="goArticle">{{messageData.articleDescribe}}</span>
<!--            <a :href="`/article/${messageData.articleId}`"  class="spanMessage">{{messageData.articleDescribe}}</a>-->
            <el-button style="color: #729598" type="text" @click="packDown">阅读全文<i class="el-icon-arrow-down"></i></el-button>
          </div>

        </div>
        <div class="imgDiv">
          <!--          <img src="../../assets/logo1.jpg" alt="" class="bodyImage">-->
          <img :src="messageData.articlePicture" v-if="messageData.articlePicture" alt="" class="bodyImage">
        </div>
      </div>


      <div class="bodyShow" v-else>
        <!--  文章标题  -->
        <div class="title" onMouseEnter="this.className = 'title onFocus'" onMouseLeave="this.className = 'title'">
<!--          <router-link :to="{path: `/article/${messageData.articleId}`}">{{messageData.articleTitle}}</router-link>-->
          <span @click="goArticle">{{messageData.articleTitle}}</span>
        </div>
        <div class="bodyShow">
          <div class="authorMessage">
            <el-popover
                    placement="bottom-start"
                    width="300"
                    trigger="hover"
            >
              <UserCard :user-id="authorSimpleMessage.userId" :user-nickname="authorSimpleMessage.userNickname" :user-profile="authorSimpleMessage.userProfile" :user-icon="authorSimpleMessage.userIcon" :user-phone="authorSimpleMessage.userPhone"></UserCard>
              <div class="authorAvatar" slot="reference">
                <el-avatar :src="authorSimpleMessage.userIcon"></el-avatar>
              </div>
            </el-popover>
            <div class="authorName">
              <span>{{authorSimpleMessage.userNickname}}</span>
            </div>
          </div>
          <div style="width: 100%">
            <img :src="messageData.articlePicture" alt="" class="bodyImageDown">
          </div>
          <div class="bodyShow" ><span v-html="messageData.articleBody"></span></div>
          <el-button style="color: #729598" type="text" @click="packUp">收起<i class="el-icon-arrow-up"></i></el-button>
        </div>

      </div>
      <Actions :message-id="messageId" :thumb-up-num="messageData.articleThumup" :message-type="messageType" :click="false" :comment-num="messageData.articleComment"></Actions>
    </div>
  </div>

</template>

<script>
  import Actions from "./Actions";
  import UserCard from "../userCard/UserCard";
  export default {
    name: "MessageCard",
    props: {
      messageData: {
        type: Object,
        default: null,
      },
      messageId: {
        type: Number,
        default: null,
      },
      messageType: {
        type: String,
        default:null,
      }
    },
    components: {
      Actions,UserCard
    },
    data(){
      return {
        isPackUp: true,
        authorSimpleMessage: null,
      }
    },
    created() {

    },
    methods: {
      goArticle(){
        this.$router.push({path: `/article/${this.messageData.articleId}`});
      },
      packUp(){
        this.isPackUp = true;
      },
      packDown(){
        this.isPackUp = false;
        this.getSimpleAuthorMessage();
      },
      getSimpleAuthorMessage(){

        this.$http.get('/user/getUserSimpleMessage',{
          params: {
            articleId : this.messageData.articleId
          }
        }).then(
            res=>{
              console.log(res.data.data)
              this.authorSimpleMessage = res.data.data;
            }

        )
      }
    }
  }
</script>

<style Lang="less" scoped>

  .messageContent{
    /*margin-bottom: 10px;*/
    border-bottom: 1px solid #f0f2f7;
    display: flex;
    /*justify-content: center;*/
    padding: 10px 20px;
  }

  .messageCard{
    /*height: 300px;*/
    padding-top: 10px;
    width: 100%;
  }

  .messageBody {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 455px;
    /*display: flex;*/
    /*padding-left: 10px;*/

  }

  .messageBodyDown {
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding-left: 10px;*/

  }

  .imgDiv{
    margin-left: 10px;
    margin-top: 20px;
    /*display: flex;*/
    /*justify-content: center;*/
    width: 200px;
    height: 80px;

  }

  .bodyImage {
    position: relative;
    width: 210px;
    height: 140px;
    margin-top: -2px;
    margin-right: 18px;
    margin-bottom: 4px;
    float: left;
    overflow: hidden;
    background-position: 50%;
    background-size: cover;
    border-radius: 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .messageDiv{
    font-size: 14px;
    height: 105px;
    /*display: flex;*/
    align-items: center;

  }

  .title {
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
  }

  .onFocus{
    color: #729598;
  }

  .messageOnFocus{
    color: #676a6f;
  }

  .spanMessage{
    display: block;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:4;    /*定义的数字为显示的行数*/
    -webkit-box-orient:vertical;
    cursor: pointer;
    text-decoration: none;
  }

  .bodyImageDown{
    width: 100%;
  }

  .authorMessage{
    display: flex;
    padding: 10px 5px 10px 2px;
  }

  .authorName{
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 12px;
    cursor: pointer;
  }

  .bodyShow {
    width: 100%;
    white-space:normal;
    word-wrap: break-word;
    word-break: break-all;
    /*word-break-inside: all;*/
    /*word-break: break-word;*/
  }


</style>